<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 一个表格，表头包括id，姓名，性别，年龄 -->
     <table border="1">
         <thead>
             <tr>
                 <th>序号</th>
                 <th>姓名</th>
                 <th>id</th>
                 <th>性别</th>
                 <th>年龄</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="(e,index) in staffs" :key="e.id">
                <td>{{index + 1}}</td>
                <td>{{e.name}}</td>
                <td>{{e.id}}</td>
                <td>{{e.sex == 1 ? '男':'女'}}</td>
                <td>{{e.age}}</td>
            </tr>
         </tbody>
     </table>

    </div>
    
     <script type="module">
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'   
         createApp({
             data() {
                 return {
                     staffs: [
                         {id: 1, name: '张三', sex: 1, age: 18},
                         {id: 2, name: '李四', sex: 2, age: 18},
                     ]
                 }
             }
         }).mount('#app')
     </script>
</body>
</html>